<template>
  <div class="contentRight">
    <div class="rightTop">
      <transition name="fade">
        <img
          src="../../../static/img/projectDetail/qrcode.png"
          v-if="qrcode"
          class="qrcode"
          @mouseover="mouseOver"
        />
        <div
          class="qrcodeBox boxShadow"
          v-if="qrcodeImgCon"
          @mouseleave="mouseleave"
        >
          <img
            src="../../../static/img/projectDetail/qrcode.png"
            class="qrcodeTwo"
          />
          <img :src="qrcodeBoxUrl" alt />
          <div class="content">
            1.使用工匠365APP扫一扫即可
            <br />快速录入人员加入本项目； <br />2.使用和谐用工APP扫一扫可快
            <br />速查看项目信息。 <br />※建议
            <a
              href="javascript:;"
              download="二维码"
              @click="downLoad"
              class="driveDownload"
              >下载</a
            >后打印，与维权公示牌一同张贴
          </div>
        </div>
      </transition>
      <div class="title">待处理预警</div>
      <div class="noData" v-if="alertInfo.length === 0">暂无待处理预警数据</div>
      <ul v-else-if="alertInfo.length > 0">
        <li v-for="(item, index) of alertInfo" :key="index">
          <span class="time">{{ item.generateTime || '--' }}</span>
          <span class="reason ellipsis">{{ item.typeName || '--' }}</span>
          <span class="handle handleIng" v-if="item.statusDesc == '处理中'"
            >处理中</span
          >
          <span class="handle handleNo" v-if="item.statusDesc == '未处理'"
            >未处理</span
          >
        </li>
      </ul>
      <div style="text-align: center" v-if="alertTotal > 8">
        <el-link type="primary" @click="moreAlert">查看更多>></el-link>
      </div>
    </div>
    <div class="rightCenter">
      <div class="title">
        项目基本信息
        <template v-show="isCompetentDepartment != 'CHIEF'">
          <el-link
            type="primary"
            class="fr"
            style="margin-top: 4px"
            @click="updateProjectInfo"
            v-show="(companyType === 'SG' || userType === 'JC') && isShowUpdate"
            >去修改>></el-link
          >
          <span
            class="fr untrue"
            v-show="(companyType === 'SG' || userType === 'JC') && isShowUpdate"
            >信息不正确？</span
          >
        </template>
      </div>
      <ul>
        <li class="clearfix">
          <span>建设方：</span>
          <span>{{ projectInfo.pcName || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>施工方：</span>
          <span>{{ projectInfo.pbName || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>投资类别：</span>
          <span>{{ projectInfo.investmentDesc || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>所属行业：</span>
          <span>{{ projectInfo.industryName || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>工程造价：</span>
          <span>
            <span>{{ projectInfo.total || '0' }}</span
            >元
          </span>
        </li>
        <li class="clearfix">
          <span>项目地址：</span>
          <span v-if="$store.state.userType !== 'MONITOR'">{{
            projectInfo.address || '--'
          }}</span>
          <el-link type="primary" @click="goProDistribution" v-else>{{
            projectInfo.address || '--'
          }}</el-link>
        </li>
        <li class="dashed"></li>
        <li class="clearfix">
          <span>项目负责人：</span>
          <span>{{ projectInfo.leader || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>联系方式：</span>
          <span>{{ projectInfo.leaderTel || '--' }}</span>
        </li>
        <li class="dashed"></li>
        <li class="clearfix">
          <span>项目经理：</span>
          <span>{{ projectInfo.managerName || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>联系方式：</span>
          <span>{{ projectInfo.managerTel || '--' }}</span>
        </li>
        <li class="dashed"></li>
        <li style="text-align: center">
          <el-link type="primary" @click="seeProjectDetail"
            >查看项目详情>></el-link
          >
        </li>
      </ul>
    </div>
    <div class="rightBottom" id="insurance">
      <div class="title">工伤保险信息</div>
      <div class="noData" v-if="inslistTotal === 0">暂无工伤保险数据</div>
      <ul class="clearfix" v-else-if="inslistTotal > 0">
        <li class="clearfix">
          <span>首次参保&nbsp;&nbsp;&nbsp;</span>
        </li>
        <li class="clearfix">
          <span>参保时间：</span>
          <span>{{ inslistFirst.insDate || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>参保单位：</span>
          <span>{{ inslistFirst.companyName || '--' }}</span>
        </li>
        <li class="clearfix">
          <span>投保单位：</span>
          <span>{{ inslistFirst.bureau || '--' }}</span>
        </li>
        <li class="clearfix">
          <template v-if="!isEsUser()">
            <span>参保人数：</span>
            <span>{{ inslistFirst.total || '0' }}</span>
          </template>
          <template v-else>
            <span>累计备案人数：{{ recordInfo.empCount || '0' }}人</span>
          </template>
        </li>
      </ul>
      <div class="insuranceMore" v-if="inslistTotal > 1">
        <el-link type="primary" @click="inslistMore(inslistFirst)"
          >查看更多>></el-link
        >
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'
//引入vue数字滚动插件vue-countTo
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  name: 'projectDetailKb',
  props: ['projectId', 'typeData', 'id', 'companyType'],
  data() {
    return {
      alertInfo: '', //预警信息
      alertTotal: 0, //预警总条数
      projectInfo: {}, //项目基本信息
      projectName: '', //传值项目名称
      startDate: '', //传值开工日期
      cycle: '', //建设周期
      disDate: '', //距离竣工时间
      status: '', //开工状态
      salaryDay: '', //工资发放日
      inslistTotal: 0, //工伤保险条数
      inslistFirst: '', //工伤保险
      qrcodeBoxUrl: '', //二维码图片
      qrcodeImgCon: false, //二维码整体
      isShowUpdate: '',
      createTime: '',
      qrcode: true,
      userType: '', //用户类型
      sourceTypeText: '', //项目来源
      arrData: {},
      recordInfo: {},
    }
  },
  created() {
    this.userType = localStorage.getItem('loginType')
    //二维码路径
    this.qrcodeBoxUrl =
      common.commonApi + 'api-p/project/base/qrimage?info=' + this.projectId
    //项目基本信息
    this.getProjectdetail()
    //获取预警信息
    this.getAlertInfo()
    //工商保险信息
    this.getGsInfo()
    // 恩施工商保险信息
    this.getRecordInfo()
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('mProjectList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListJSF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('projectListSGF:update') > -1
  },
  computed: {
    isCompetentDepartment() {
      return this.$store.state.accountType
    },
  },
  mounted() {
    this.clickDocument()
  },
  methods: {
    // 移入
    mouseOver() {
      this.qrcodeImgCon = true
      this.qrcode = false
    },
    //移出
    mouseleave() {
      this.qrcodeImgCon = false
      this.qrcode = true
    },
    clickDocument() {
      $(document).click(() => {
        this.qrcodeImgCon = false
        this.qrcode = true
      })
    },
    downLoad() {
      window.open(
        common.commonApi + 'api-p/project/base/downqr?info=' + this.projectId
      )
    },
    getAlertInfo() {
      this.axios({
        method: 'post',
        url: 'api-a/cs/alert/expand/projectalert',
        data: {
          projectId: this.projectId,
          pageNo: 1,
          pageSize: 9,
          status: '["01","05"]', //未处理，处理中
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.alertTotal = response.data.result.total
            this.alertInfo = response.data.result.results
          }
        })
        .catch((error) => {
          // this.$message.error("专户数据获取失败");
        })
    },
    //去处理预警详情
    seeAlertDetail(id) {
      this.$router.push({
        name: 'constructAlertProjectList',
        path: '/home/project/constructAlertProjectList',
        query: {
          projectName: this.projectName,
          projectId: this.projectId,
          alertId: id,
          status: '01',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/constructAlertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //查看更多预警
    moreAlert() {
      this.$router.push({
        name: 'constructAlertProjectList',
        path: '/home/project/constructAlertProjectList',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
          status: '01',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/constructAlertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    inslistMore({ projectId, id } = inslistFirst) {
      let name = 'insuranceDetail',
        path = '/home/insurance/insuranceDetail',
        oldUrl = '/home/insurance/insuranceList'
      let query = {
        id: projectId,
        projectName: this.projectName,
        type: 'insuranceDetail',
      }
      if (this.isEsUser()) {
        name = 'ESinsuranceDetail'
        path = '/home/ESinsurance/ESinsuranceDetail'
        oldUrl = '/home/ESinsurance/ESinsuranceList'
        query.id = id
        query.projectId = projectId
      }
      this.$router.push({
        name,
        path,
        query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 修改项目信息
    updateProjectInfo() {
      // this.$router.push({
      // path: "/home/monitorProjectManagement/projectInfoUpd",
      // name: "projectInfoUpd",
      // query: {
      //     projectId: this.projectId,
      // }
      // });
      // this.$store.commit("CHANGE_SLIDER_NAME", {
      // oldUrl:"/home/project/projectList",
      // newUrl: this.$router.currentRoute.fullPath
      // });
      if (this.userType === 'QY' || this.userType === 'XM') {
        this.$router.push({
          path: '/home/companyProjectManage/companyProjectInfoUpd',
          name: 'companyProjectInfoUpd',
          query: {
            projectId: this.projectId,
            companyType: this.companyType,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/projectListQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        //返回到监察端的项目列表
        this.$router.push({
          path: '/home/monitorProjectManagement/projectInfoUpd',
          name: 'projectInfoUpd',
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/projectList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getProjectdetail() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/projectdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.createTime = response.data.result.createTime
            this.projectInfo = data
            this.projectName = data.projectName
            this.startDate = data.startDate
            this.cycle = data.cycle
            this.disDate = data.disDate
            this.status = data.status
            this.salaryDay = data.salaryDay
            this.sourceTypeText = data.sourceTypeText
            this.arrData = response.data.result
            this.$emit(
              'func',
              this.projectName,
              this.startDate,
              this.cycle,
              this.disDate,
              this.status,
              this.salaryDay,
              this.createTime,
              this.sourceTypeText
            )
          }
        })
        .catch((error) => {
          // this.$message.error("项目信息获取失败");
        })
    },
    getGsInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/inslist',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            this.inslistTotal = data.length
            if (data.length > 0) {
              this.inslistFirst = data[0]
            }
          }
        })
        .catch((error) => {
          // this.$message.error("工伤保险数据获取失败");
        })
    },
    // 恩施工伤保险信息获取备案信息
    getRecordInfo() {
      this.axios({
        method: 'post',
        url: '/api-e/cs/emprecord/expand/statistics',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          this.recordInfo = response.data.result
        })
        .catch((error) => {})
    },
    seeProjectDetail() {
      let flag = true
      this.$emit(
        'func',
        this.projectName,
        this.startDate,
        this.cycle,
        this.disDate,
        this.status,
        this.salaryDay,
        this.createTime,
        this.sourceTypeText,
        flag
      )
    },
    goProDistribution() {
      this.$router.push({
        path: '/home/projectMap/proDistribution',
        query: { arrData: JSON.stringify(this.arrData), mark: 'projectDetail' },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/projectMap/proDistribution',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.contentRight {
  .fade-enter-active,
  .fade-leave-active {
    transition: 0.3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0;
  }
  .boxShadow {
    box-shadow: -2px 4px 8px rgba(0, 0, 0, 0.1);
  }
  width: 422px;
  position: absolute;
  top: 0;
  right: 0;
  .rightTop,
  .rightCenter,
  .rightBottom {
    background: #fff;
    border: 2px solid #fff;
    margin-bottom: 10px;
    .title {
      // height: 58px;
      // line-height: 58px;
      font-size: 18px;
      color: #333;
      padding: 18px 32px;
      line-height: 24px;
      // background-color: #e4ebf1;
      .untrue {
        font-size: 14px;
        color: #666666;
        font-weight: normal;
        margin-right: 4px;
      }
    }
    .noData {
      padding-top: 50px;
      text-align: center;
    }
  }
  .rightTop {
    min-height: 230px;
    max-height: 518px;
    padding-bottom: 30px;
    position: relative;
    // height: 518px;
    /deep/ .qrcode {
      position: fixed;
      width: 60px;
      top: 296px;
      right: 10px;
    }
    ul {
      // padding: 20px 16px;
      padding: 0 16px 20px 16px;
      font-size: 14px;
      li {
        height: 40px;
        padding-top: 10px;
        &:nth-child(odd) {
          background: #f5f7fb;
        }
        &:nth-child(even) {
          border-bottom: 2px solid #f5f7fb;
        }
        .time,
        .reason,
        .handle {
          float: left;
          display: inline-block;
          text-align: left;
        }
        .time {
          width: 35%;
          padding-left: 20px;
        }
        .reason {
          width: 45%;
          padding-left: 20px;
        }
        .handle {
          width: 20%;
        }
        .handleIng {
          color: #ffb649;
        }
        .handleNo {
          color: #e02020;
        }
      }
    }
  }
  .rightCenter {
    // .title .fr {
    //   line-height: 40px;
    //   margin-top: 8px;
    // }
    ul {
      // margin-top: 10px;
      margin-bottom: 40px;
      padding: 0 32px;
      line-height: 30px;
    }
    .dashed {
      border-bottom: 1px dashed #d5dee7; //修改虚线高度为1px
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
  .rightBottom {
    min-height: 230px;
    max-height: 422px;
    padding-bottom: 30px;
    ul {
      // padding: 10px 32px;
      padding: 0 32px 28px 32px;
      line-height: 30px;
    }
    .insuranceMore {
      text-align: center;
    }
  }
  .rightCenter > ul > li > span,
  .rightBottom > ul > li > span {
    display: block;
    float: left;
  }
  .rightCenter > ul > li > span:nth-child(1),
  .rightBottom > ul > li > span:nth-child(1) {
    // width: 84px;
    text-align: right;
    font-size: 14px;
    color: #333;
  }
  .rightCenter > ul > li > span:nth-child(2),
  .rightBottom > ul > li > span:nth-child(2) {
    width: 270px;
    word-wrap: break-word;
    font-size: 14px;
    color: #666;
  }
  .qrcodeBox {
    position: fixed;
    right: 0;
    z-index: 9999;
    width: 220px;
    height: 348px;
    background: #fff;
    padding: 20px 25px;
    border-radius: 0 0 0 16px;
    .qrcodeTwo {
      position: fixed;
      width: 60px;
      top: 296px;
      right: 206px;
    }
    img {
      width: 170px;
    }
    .content {
      font-size: 12px;
      color: #333333;
      line-height: 21px;
      margin-top: 4px;
      .driveDownload {
        color: #409eff;
        font-size: 11px;
        margin-top: 10px;
        border-bottom: 1px solid #409eff;
        text-align: center;
        &:hover {
          color: #0070f5;
          border-bottom: 1px solid #0070f5;
        }
      }
    }
  }
}

.titleInfo {
  font: 18px/50px Microsoft YaHei;
  &::before {
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #17a487;
    content: '';
    //这个指为正的话 小方块就往上， 为负的话，小方块就往下
    vertical-align: -5px;
    margin-right: 15px;
  }
}
.labelWidth {
  display: inline-block;
  width: 135px;
  text-align: right;
  font-size: 14px;
  color: #333;
  line-height: 36px;
}
.information {
  font-size: 14px;
  color: #666;
  line-height: 36px;
}
// 二维码
// @media screen and (max-width: 1400px) {
//   .qrcode {
//     top: 196px !important;
//   }
//   .qrcodeBox {
//     top: 215px !important;
//   }
//   .qrcodeTwo {
//     top: 203px !important;
//   }
// }
</style>
